<template>
  <div>
    <topWindow></topWindow>
    <div class="main">
        <countryEasyInfo :ccountryID="countryID"></countryEasyInfo>
        <div class="detailmsg">
            <!-- 底部国家关系大盒子 -->
            <div ref="container" class="detailbox">
                <!--左侧上下滑动的菜单-->
                <div class="menubox">
                    <div class="menu" :style="{ top: fixedElementTop + 'px' }">
                        <div class="menuitem" :class="{ active: activeIndex === index }" @click="scrollTo(item)" v-for="(item, index) in menuList" :key="index">
                            <img class="menuimg" src="@/assets/img/icon/userimg.png" alt="">
                            <div class="menutitle">{{item}}</div>
                            <img v-show="activeIndex === index" class="rightimg" src="@/assets/img/icon/right.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- 右侧关系详情 -->
                <div ref="content" class="detail">
                    <!-- 未来请求可能会用到 -->
                    <!-- <div class="detailitem" v-for="(item, index) in countryDetail" :key="index" :id="item.primaryTagName">
                        <h1 class="detailtitle" :class="{ history: item.primaryTagName === '历史概况' }">{{item.primaryTagName}}</h1>
                        <div class="detailiitem" v-for="(iitem, iindex) in item.secondaryTagsVoList" :key="iindex">
                            <h4 class="detailttitle">{{iitem.secondaryTagName}}</h4>
                            <p class="detailmmsg" :class="{historymsg: item.primaryTagName === '历史概况'}">{{iitem.countryInfo}}</p>
                        </div>
                    </div> -->
                    <div class="detailitem" :id="'与中国大陆的关系'">
                        <h1 class="detailtitle themecolor">与中国大陆的关系</h1>
                        <div class="detailiitem">
                            内容xxx
                        </div>
                    </div>
                    <div class="detailitem" :id="'与中国台湾的关系'">
                        <h1 class="detailtitle themecolor">与中国台湾的关系</h1>
                        <div class="detailiitem">
                            内容xxx
                        </div>
                    </div>
                    <div class="detailitem" :id="'与西方国家的关系'">
                        <h1 class="detailtitle themecolor">与西方国家的关系</h1>
                        <div class="detailiitem">
                            内容xxx
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import topWindow from '@/components/top_window.vue'
import countryEasyInfo from '@/components/countryEasyInfo.vue'
export default {
    data(){
        return{
            countryID: '',
            activeIndex: 0,
            menuList: ['与中国大陆的关系','与中国台湾的关系','与西方国家的关系'],
        }
    },
    components:{
        topWindow,
        countryEasyInfo
    },
    methods:{
        scrollTo(index) {
            const element = document.getElementById(index);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
        },
    },
    created(){
        this.countryID = this.$route.query.id;
    }
}
</script>

<style lang="scss" scoped>
.main{
    margin-top: 60px;
    .detailmsg{
        display: flex;
        flex-direction: column;
        padding: 0 40px;
        .detailbox{
            display: flex;
            padding: 50px 150px;
            .menubox{
                border-right: 3px solid $borderColor;
                padding: 10px 20px;
                .menu{
                    margin-top: 40px;
                    border-radius: 5px;
                    background-color: rgb(245, 249, 252);
                    display: flex;
                    flex-direction: column;
                    width: 200px;
                    .menuitem{
                        display: flex;
                        align-items: center;
                        padding: 5px 10px;
                        border-radius: 8px;
                        height: 35px;
                        cursor: pointer;
                        .menuimg{
                            $menuImgSize: 20px;
                            width: $menuImgSize;
                        }
                        .menutitle{
                            font-size: 0.8em;
                            font-weight: bold;
                            padding-left: 10px;
                            color: rgb(113, 128, 152)
                        }
                        .rightimg{
                            position: absolute;
                            right: 8px;
                            width: 15px;
                        }
                        &.active {
                            background-color: rgb(0, 67, 149);
                            .menutitle{
                                color: white;
                            }
                        }
                    }
                }
            }
            .detail{
                padding: 0 50px;
                .detailitem{
                    margin-bottom: 70px;
                    .detailtitle{// color: $themeColor;
                        font-size: 3em;
                    }
                    .history{
                        color: #000!important;
                    }
                    .detailiitem{
                        .detailttitle{
                            cursor: pointer;
                            font-size: 1.2em;
                            font-weight: bold;
                            height: 1.3em;
                            width: fit-content;
                            color: #000;
                            padding-bottom: -1px;
                            border-bottom: 1px solid #000;
                            margin-top: 20px;
                            margin-bottom: 20px;
                        }
                        .detailmmsg{
                            font-weight: 500;
                            color: gray;
                            white-space: pre-wrap;
                        }
                        .historymsg{
                            // text-indent: 2em;
                        }
                    }
                }
            }
        }
    }
}
</style>
